<template>
  <div class="container">
    <div class='top_fixed'>
      <!-- 搜索栏 -->
      <div class='search'>
        <div class='address' @click="chooseAddress()">
          <span>{{location.name}}</span>
          <img src='https://img.ameimeika.com/active/170ed3a2a16df24d910d75a4c3db013c.png'>
        </div>

        <div class='search_input'>
          <img src='https://img.ameimeika.com/active/ba3955e3460bee281fcdcca66e719913.png'>
          <input placeholder='请输入素材名称' v-model="keyword" @confirm="getval()" type="search" />
        </div>
      </div>

      <!-- 素材导航 -->
      <div class='m_nav'>
        <div class='nav_bar'>
          <span :class="index == parent ? 'select' : 'default'" v-for="(item,index) in pts.parent" :key="index"
            @click="pchange2(index)">{{item}}</span>
        </div>
      </div>
    </div>
    <scroll-view :scroll-y="true" :style="{'height': clientHeight+'px'}" @scrolltolower="infinite_scroll">
      <!-- 素材类型列表 -->
      <div class='itemlist'>
        <swiper class="swiper" :current='parent-1' :indicator-dots="true" @change="pchange"
          :style="{height:swiper_heigth+5+'rpx'}">
          <swiper-item v-for="(item,index) in pts.types" :key="index">
            <div class="swiper_page">
              <div class='item' v-for="(ty,indexs) in item" :key="indexs" @click='goMaterialList(ty.name,ty.id)'>
                <img :src="imgUrl+ty.img" />
                <div>{{ty.name}}</div>
              </div>
            </div>
          </swiper-item>
        </swiper>
      </div>
      <!-- 分隔 -->
      <div class='hr'></div>
      <!-- 推荐素材 -->
      <div class='recommend'>
        <img src='https://img.ameimeika.com/active/5be9ca8a4ba243a812e2e4d96c9e631b.png' />
        <span>推荐素材</span>
        <img src='https://img.ameimeika.com/active/8f9490bbd5aabe431f3c3d4b4f0feb1c.png' />
      </div>

      <!-- 素材列表 -->
      <div class='material_list' v-if="pData.length>0">

        <div class='col'>
          <!-- 素材列表item -->
          <div :key="index" v-for="(item,index) in pData" class='material_item'>
            <div @click="item.is_recom==1?todetails(item.class,item.id):''">
              <div class='imgbox'>

                <!--遮罩-->
                <div v-if="item.is_recom==0" class='mask_box'></div>

                <!--封面图-->
                <image v-if="item.mini_url" :src='imgUrl+item.mini_url' mode="widthFix"></image>

                <div v-if="item.class == 2" class='mask'>
                  <img src='https://img.ameimeika.com/active/1efc6d65c2d9cb1b0ffecd66a8a415f8.png' />
                </div>
              </div>
              <div class='title'>{{item.title}}</div>
            </div>
          </div>
          <!-- 素材列表item end-->
        </div>
      </div>

      <!-- 素材列表占位符 -->
      <div v-else class='orderholder'>
        <img src='https://img.ameimeika.com/active/d6eb8722443cb0715bd805b8798587d7.png' />
        <div>暂无相关素材～</div>
      </div>
    </scroll-view>

    <!-- 授权弹框 -->
    <div v-if="isalert" class='getloation'>
      <div class='model'>
        <div class='tit'>是否授权当前位置</div>
        <div class='det'>部分功能需要获取您的地理位置，请您接受授权，以免影响您的使用</div>
        <div class='btn'>
          <button @click='cancel'>取消</button>
          <view class='line'></view>
          <button @click='cancel' open-type="openSetting" @opensetting='handler' class='sure'>确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      imgUrl: common.image_response,
      pts: {}, //分类数据
      parent: 1, //当前父分类
      swiper_heigth: 100,

      pData: [], //页面素材数据
      page: 1, //素材当前页
      isshow: false,

      isalert: false, //自定义 定位授权窗
      location: { province_id: 13, name: "湖北省" }, //定位默认湖北省
      new_location: { province_id: 13, name: "湖北省" }, //定位默认湖北省

      //经纬度  默认总部地址
      postion: {
        latitude: 30.49984,
        longitude: 114.34253
      },

      top: 0,
      isService: false,
      clientHeight: 0,
      keyword:''
    };
  },
  onLoad(options) {
    let that = this;
    wx.setNavigationBarTitle({
      title: "素材中心"
    });
    wx.getSystemInfo({
      success: function(res) {
        // 获取可使用窗口宽度
        that.clientHeight = res.windowHeight;
      }
    });
    //如果值发生了改变
    if (options.new_location) {
      this.new_location = JSON.parse(options.new_location);
      if (this.new_location.province_id != this.location.province_id) {
        this.location = this.new_location;
        this.page = 1;
        this.pData = [];
        this.getData(); //获取素材数据
      }
    } else {
      this.getlatitude(); // 获取经纬度 定位省份
      this.getTypes(); //获取分类
    }
    
  },
  onShow() {
  },
  methods: {
    chooseAddress() {
      wx.navigateTo({
        url: `/pages/material_center/choose_address/main?province_id=${
          this.location.province_id
        }&name=${this.location.name}`
      });
    },
    // 获取经纬度
    getlatitude: function() {
      var that = this;
      wx.showLoading({
        title: "正在获取定位,请稍后"
      });

      // 获取经纬度
      wx.getLocation({
        type: "wgs84",
        success(res) {
          that.postion.latitude = res.latitude;
          that.postion.longitude = res.longitude;
          // 获取省份
          that.getaddress();
        },
        fail(res) {
          wx.getSetting({
            success(res) {
              if (!res.authSetting["scope.userLocation"]) {
                that.isalert = true;
              } else {
                wx.showToast({
                  title: "定位获取失败",
                  icon: "none",
                  duration: 2000
                });
              }
            }
          });
          that.getData(); //获取素材数据
        }
      });
    },
    // 获取定位省份
    getaddress: function() {
      var data = this.postion;
      common.mmk_Loading(0);
      common.fly_post("/api/act/material/location", data, msg => {
        common.mmk_Loading(1);
        let res = msg.data;
        if (res.status_code == 0) {
          this.location = res.data;
          this.page = 1;
          this.pData = [];
          this.getData();
        } else {
          common.mmk_Loading(2, res.message);
        }
      });
    },
    infinite_scroll() {
      this.page++;
      this.getData();
    },
    getData() {
      var data = {
        province_id: this.location.province_id,
        page: this.page,
        pageSize: 6,
        parent: this.parent
      };

      common.mmk_Loading(0);
      common.fly_post("/api/act/material/material_list", data, msg => {
        common.mmk_Loading(1);
        let res = msg.data;
        if (res.status_code == 0) {
          var pData = res.data;

          this.pData = this.pData.concat(pData);
        } else {
          common.mmk_Loading(2, res.msg);
        }
      });
    },
    //取消定位授权
    cancel: function() {
      this.isalert = false;
    },

    // 再次调用定位
    handler: function(e) {
      wx.getSetting({
        success: res => {
          if (res.authSetting["scope.userLocation"] === true) {
            // 成功授权
            // 已经授权，不会弹框
            wx.getLocation({
              type: "wgs84",
              success(res) {},
              fail() {
                wx.showToast({
                  title: "无法获取地理位置",
                  icon: "none",
                  duration: 2000,
                  mask: true
                });
              }
            });
          } else if (res.authSetting["scope.userLocation"] === false) {
            // 授权弹窗被拒绝
            this.isalert = true;
          } else {
            // 没有弹出过授权弹窗
            this.getlatitude();
          }
        }
      });
    },
    //获取分类列表
    getTypes() {
      common.mmk_Loading(0);
      common.fly_post("/api/act/material/get_type", {}, msg => {
        common.mmk_Loading(1);
        let res = msg.data;
        if (res.status_code == 0) {
          this.pts = res.data;

          this.setHeight(this.parent);
        } else {
          common.mmk_Loading(2, res.msg);
        }
      });
    },
    //设置轮播的高度
    setHeight: function(parent) {
      var len = this.pts.types[parent].length;
      var i = Math.ceil(len / 4);
      this.swiper_heigth = 150 * i + 40;
    },
    //监听到滑动
    pchange(e) {
      var parent = e.target.current + 1;
      this.pset(parent);
    },
    //点击 父分类切换
    pchange2(index) {
      this.parent = index;
    },
    pset(parent) {
      this.page = 1;
      this.pData = [];
      this.parent = parent;
      this.top = 0;
      this.setHeight(parent);
      this.getData();
    },
    //素材搜索
    getval() {
      var keyword = this.keyword;

      console.log("跳转搜索");

      this.keyword = "";

      if (keyword) {
        wx.navigateTo({
          url: `/pages/material_center/material_search/main?keyword=${keyword}&province_id=${
            this.location.province_id
          }`
        });
      }
    },

    //跳转详情
    todetails(classs, id) {
      var that = this;
      var mid = id;
      var classs = classs;
      wx.getStorage({
        key: "user_token",
        success: response => {
          //   已登录
          wx.navigateTo({
            url: `/pages/material_center/material_del/main?mid=${mid}&class=${classs}&page=${
              that.page
            }`
          });
        },
        fail: () => {
          //   未登录
          wx.navigateTo({
            url: "/pages/package_main/login/main"
          });
        },
        complete: () => {}
      });
    },

    //跳转单个素材列表
    goMaterialList(name, id) {
      var that = this;
      var ids = id;
      var title = name;

      if (ids) {
        wx.navigateTo({
          url: `/pages/material_center/material_list/main?title=${title}&province_id=${
            this.location.province_id
          }&type=${ids}`
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
/* material.wxss */
.container_material {
  min-height: 100%;
}
/* 头部导航固定 */
.top_fixed {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 100;
}
/* 搜索栏 */
.search {
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.search .address span {
  color: #444;
  font-size: 14px;
  margin-right: 7px;
}
.search .address img {
  width: 13px;
  height: 13px;
  vertical-align: middle;
}
.search .search_input {
  position: relative;
  width: 75%;
}
.search .search_input input {
  height: 32px;
  line-height: 32px;
  background: #f5f5f5;
  border-radius: 32px;
  padding-left: 35px;
  margin-top: 5px;
  font-size: 14px;
}
.search .search_input img {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 11px;
  left: 10px;
}
.search .search_input .s_place {
  font-size: 13px;
  color: #999;
  line-height: 32px;
}
/* 导航 */
.m_nav {
  margin: 0 15px;
  height: 32px;
  line-height: 32px;
  overflow: auto;
}
.m_nav .nav_bar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.m_nav span {
  height: 30px;
  line-height: 30px;
}
.m_nav .default {
  font-size: 14px;
  color: #444;
}
.m_nav .select {
  font-size: 14px;
  color: #fe4489;
  border-bottom: 2px solid #fe4489;
}
/* 导航列表 */
.itemlist {
  padding: 102px 15px 15px;
}
.itemlist .swiper_page {
  display: flex;
  flex-wrap: wrap;
}
.itemlist .item {
  display: inline-block;
  font-size: 12px;
  color: #444;
  width: 25%;
  text-align: center;
  margin-bottom: 15px;
}
.itemlist .item img {
  width: 48px;
  height: 48px;
}

/* swpier指示点样式 */
.itemlist .wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: -7px;
}
.itemlist .wx-swiper-dot {
  width: 4px;
  display: inline-flex;
  height: 4px;
  justify-content: space-between;
}
.itemlist .wx-swiper-dot-active {
  width: 10px;
}
.itemlist .wx-swiper-dot::before {
  content: "";
  flex-grow: 1;
  background: #cccc;
  border-radius: 4px;
}
.itemlist .wx-swiper-dot-active::before {
  background: rgba(254, 68, 137, 1);
}

/* 推荐素材 */
.recommend {
  text-align: center;
  margin-top: 10px;
}
.recommend img {
  width: 14px;
  height: 12px;
  vertical-align: middle;
}
.recommend span {
  font-size: 14px;
  color: #fe4489;
  margin: 0 4%;
}
.material_list {
  display: flex;
  margin-top: 15px;
}
.material_list .col {
  width: 100%;
  columns: 2;
  flex-wrap: nowrap;
  padding: 0 4%;
}
.material_list .col_r {
  width: 45%;
  display: flex;
  flex-direction: column;
  padding: 0 4% 0 1%;
}
.material_list .material_item {
  width: 100%;
  font-size: 0;
  margin-bottom: 15px;
  break-inside: avoid;
}
.material_list .material_item .imgbox {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 5px;
  text-align: center;
  position: relative;
}
.material_list .material_item .imgbox image {
  width: 100%;
  min-height: 10px;
}
.material_list .material_item .minimgbox {
  width: 100%;
  margin: 0 auto;
  border-radius: 5px;
  text-align: center;
  position: relative;
}
.material_list .material_item .minimgbox img {
  width: 100%;
}
.material_list .material_item .imgbox .mask img {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-20px) translateY(-20px);
}
.material_list .material_item .minimgbox .mask img {
  width: 40px;
  height: 40px;
  opacity: 0.6;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-20px) translateY(-20px);
}
.material_list .material_item .title {
  font-size: 14px;
  color: #444;
  margin: 3% 0;
}
.material_list .material_item .like_msg {
  display: flex;
  flex-wrap: wrap;
  font-size: 10px;
  color: #999;
}
.material_list .material_item .like_msg .favorite {
  height: 20px;
  line-height: 20px;
  min-width: 20%;
}
.material_list .material_item .like_msg .comment {
  height: 20px;
  line-height: 20px;
  min-width: 30%;
  margin-left: 10px;
}
.material_list .material_item .like_msg .favorite img {
  width: 16px;
  height: 16px;
  vertical-align: top;
  margin-top: 2px;
}
.material_list .material_item .like_msg .comment img {
  width: 15px;
  height: 15px;
  vertical-align: top;
  margin-top: 2px;
}
/* 素材占位符 */
.orderholder {
  width: 128px;
  height: 114px;
  margin-top: 20%;
  margin-left: 50%;
  transform: translateX(-64px);
}
.orderholder img {
  width: 100%;
  height: 100%;
}
.orderholder view {
  font-size: 14px;
  color: #666;
  text-align: center;
}

/* 授权弹框 */
.getloation {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.getloation .model {
  width: 80%;
  margin: 55% 10% 0;
  background: #fff;
}
.getloation .model .tit {
  text-align: center;
  font-size: 17px;
  color: #444;
  padding: 15px 10px 10px;
}
.getloation .model .det {
  text-align: center;
  font-size: 14px;
  color: #999;
  padding: 0 15px 15px;
}
.getloation .model .btn {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #eee;
  height: 50px;
  line-height: 50px;
}
.getloation .model .btn .sure {
  color: #47b26a;
}
.getloation .model .btn div {
  height: 50px;
  width: 100%;
  line-height: 50px;
  background: #fff;
  font-size: 18px;
  text-align: center;
}
.getloation .model .btn .line {
  width: 0;
  height: 100%;
  border-left: 1px solid #eee;
}

.mask_box {
  opacity: 0.71;
  background: rgb(204, 204, 204);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
</style>

